<template>
  <div class="wechat">
    <!-- 卡片视图区域 -->
    <div class="wechat_card">
      <!--搜索框与按钮-->
      <el-row :gutter="20"
              class="wechat_card_head"
              type="flex">
        <el-col :span="5">

          <el-input placeholder="输入合同名称查询"
                    size="medium"
                    v-model="queryInfo.query"
                    clearable
                    @clear="getTableList">
            <el-button slot="append"
                       size="medium"
                       icon="el-icon-search"
                       @click="getTableList"></el-button>
          </el-input>
        </el-col>

        <el-button v-has="'6711'"
                   size="medium"
                   class="btn_head_medium"
                   type="primary"
                   @click="addDialogVisible=true"
                   icon="el-icon-circle-plus-outline">新增</el-button>

        <el-button v-has="'6712'"
                   size="medium"
                   type="danger"
                   @click="deleteRecordByIds"
                   icon="el-icon-remove-outline">删除</el-button>

        <el-select class="select_head_medium"
                   size="medium"
                   v-model="typeValue"
                   @change="selectChange"
                   clearable
                   collapse-tags
                   placeholder="按资源类型筛选"
                   style="margin-left: 20px;">
          <el-option label="商铺"
                     value="0"></el-option>
          <el-option label="车位"
                     value="1"></el-option>
          <el-option label="广告位"
                     value="2"></el-option>
        </el-select>
        <el-select class="select_head_medium"
                   size="medium"
                   v-model="statusValue"
                   @change="selectChange"
                   clearable
                   collapse-tags
                   placeholder="按有效性筛选"
                   style="margin-left: 20px;">
          <el-option label="无效"
                     value="0"></el-option>
          <el-option label="有效"
                     value="1"></el-option>
        </el-select>
        <!-- 表格列筛选和导出 -->
        <div class="tools_head">
          <el-popover placement="bottom"
                      trigger="click">
            <el-checkbox-group v-model="tableFilterData.checkBoxList">
              <template v-for="(item, i) in tableFilterData.dataNow">
                <el-checkbox :label="item.attr"
                             :key="i"
                             :checked="item.checked"
                             style="display: block;margin:10px;"
                             @change="filterFunHandle('filter',item.attr,i)">
                  {{item.label}}
                </el-checkbox>
              </template>
            </el-checkbox-group>
            <div slot="reference">
              <el-tooltip content="筛选列"
                          placement="bottom">
                <el-button size="small"
                           icon="el-icon-menu"></el-button>
              </el-tooltip>
            </div>
            <el-button size="small"
                       type="text"
                       @click="filterFunHandle('allchecked')">全选</el-button>
            <el-button size="small"
                       type="text"
                       @click="filterFunHandle('cancel')">取消全选</el-button>
          </el-popover>

          <el-tooltip content="导出excel"
                      placement="bottom">
            <el-button size="small"
                       icon="el-icon-download"
                       style="margin-left: 10px"
                       @click="exportDataToExcel"></el-button>
          </el-tooltip>
        </div>

      </el-row>
      <!-- 表格区域 -->
      <el-table :data="tableFilterData.dataList"
                style="width: 100%"
                height="85%"
                border
                stripe
                size="small"
                :key="Math.random()"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection">
        </el-table-column>
        <!-- 序号列 -->
        <el-table-column type="index"
                         label="序号"></el-table-column>
        <!-- 依次渲染表格的每列 -->
        <template v-for="(col,index) in tableFilterData.dataNow">
          <!-- 如果当前列的attr为普通类型，渲染内容即可 -->
          <el-table-column :key="index"
                           v-if="col.checked===true &&col.attr!=='state' && col.attr!=='type'&& col.attr!=='resourceType'&& col.attr!=='aname'&& col.attr!=='bname'&& col.attr!=='aidCard'&& col.attr!=='bidCard'&& col.attr!=='startTime'&& col.attr!=='endTime'&& col.attr!=='aphone'&& col.attr!=='bphone'&& col.attr!=='accessoryId'"
                           align="center"
                           :prop="col.attr"
                           :label="col.label">
          </el-table-column>

          <!-- 如果当前列的attr为state，渲染为标签形式 -->
          <el-table-column :key="index"
                           v-if="col.checked===true &&col.attr==='state'"
                           :label="col.label"
                           :prop="col.attr"
                           :filters="[{ text: '无效', value: '0' }, { text: '有效', value: '1' }]"
                           :filter-method="filterState"
                           filter-placement="bottom-end"
                           width="120">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state == '0'"
                      type="danger"
                      size="mini">无效</el-tag>
              <el-tag v-if="scope.row.state == '1'"
                      type="success"
                      size="mini">有效</el-tag>
            </template>
          </el-table-column>
          <!-- 如果当前列的attr为resourceType，渲染为标签形式 -->
          <el-table-column :key="index"
                           v-if="col.checked===true &&col.attr==='resourceType'"
                           :label="col.label"
                           :prop="col.attr"
                           :filters="[{ text: '商铺资源', value: '0' }, { text: '车位资源', value: '1' }, { text: '广告位', value: '2' }]"
                           :filter-method="filterType"
                           filter-placement="bottom-end"
                           width="120">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.resourceType == '0'"
                      size="mini">商铺资源</el-tag>
              <el-tag v-if="scope.row.resourceType == '1'"
                      type="success"
                      size="mini">车位资源</el-tag>
              <el-tag v-if="scope.row.resourceType == '2'"
                      type="warning"
                      size="mini">广告位</el-tag>
            </template>
          </el-table-column>
          <!-- 如果当前列的attr为aname，将aname内容渲染为标签形式 -->
          <el-table-column :key="index"
                           v-if="col.checked===true &&col.attr==='aname'"
                           :label="col.label"
                           :prop="col.attr"
                           width="120">
            <template slot-scope="scope">
              <el-tag size="mini">{{scope.row.aname}}</el-tag>
            </template>
          </el-table-column>
          <!-- 如果当前列的attr为bname，将bname内容渲染为标签形式 -->
          <el-table-column :key="index"
                           v-if="col.checked===true &&col.attr==='bname'"
                           :label="col.label"
                           :prop="col.attr"
                           width="120">
            <template slot-scope="scope">
              <el-tag type="warning"
                      size="mini">{{scope.row.bname}}</el-tag>
            </template>
          </el-table-column>

          <!-- 长度限定 -->
          <el-table-column :key="index+'a'"
                           v-if="col.checked===true && col.attr=='startTime' "
                           align="center"
                           :prop="col.attr"
                           :label="col.label"
                           width="180">
          </el-table-column>
          <el-table-column :key="index+'a'"
                           v-if="col.checked===true && col.attr=='endTime' "
                           align="center"
                           :prop="col.attr"
                           :label="col.label"
                           width="180">
          </el-table-column>
          <el-table-column :key="index+'a'"
                           v-if="col.checked===true && col.attr=='aidCard' "
                           align="center"
                           :prop="col.attr"
                           :label="col.label"
                           width="180">
          </el-table-column>
          <el-table-column :key="index+'a'"
                           v-if="col.checked===true && col.attr=='bidCard' "
                           align="center"
                           :prop="col.attr"
                           :label="col.label"
                           width="180">
          </el-table-column>
          <el-table-column :key="index+'a'"
                           v-if="col.checked===true && col.attr=='aphone' "
                           align="center"
                           :prop="col.attr"
                           :label="col.label"
                           width="130">
          </el-table-column>
          <el-table-column :key="index+'a'"
                           v-if="col.checked===true && col.attr=='bphone' "
                           align="center"
                           :prop="col.attr"
                           :label="col.label"
                           width="130">
          </el-table-column>
          <el-table-column :key="index+'a'"
                           v-if="col.checked===true && col.attr=='accessoryId' "
                           align="center"
                           :prop="col.attr"
                           :label="col.label"
                           width="150"
                           show-overflow-tooltip>
          </el-table-column>

        </template>

        <el-table-column label="操作"
                         width="180px"
                         fixed="right">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button v-has="'6713'"
                       type="primary"
                       icon="el-icon-edit"
                       size="mini"
                       @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除按钮 -->
            <el-button v-has="'6714'"
                       type="danger"
                       icon="el-icon-delete"
                       size="mini"
                       @click="deleteRecordById(scope.row.id)"></el-button>

          </template>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="this.queryInfo.pageNum"
                     :page-sizes="[3, 7, 15, 20, 30]"
                     :page-size="this.queryInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"></el-pagination>

      <!-- 添加记录的对话框 -->
      <el-dialog title="添加租赁合同"
                 :visible.sync="addDialogVisible"
                 @close="addDialogClosed"
                 width="50%">
        <!-- 内容主体区 -->
        <el-form :model="addForm"
                 :rules="addFormRules"
                 ref="addFormRef"
                 label-width="110px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同编号"
                            prop="contractNo">
                <el-input v-model="addForm.contractNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同名称"
                            prop="name">
                <el-input v-model="addForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出租方名称"
                            prop="aname">
                <el-input v-model="addForm.aname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出租方联系人姓名"
                            prop="acontact">
                <el-input v-model="addForm.acontact"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出租方联系人身份证号"
                            prop="aidCard">
                <el-input v-model="addForm.aidCard"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出租方联系电话"
                            prop="aphone">
                <el-input v-model="addForm.aphone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="承租方名称"
                            prop="bname">
                <el-input v-model="addForm.bname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="承租方联系人身份证号"
                            prop="bidCard">
                <el-input v-model="addForm.bidCard"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="承租方联系电话"
                            prop="bphone">
                <el-input v-model="addForm.bphone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="租赁的资源id"
                            prop="objId">
                <el-input v-model="addForm.objId"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="资源类型"
                            prop="resourceType">
                <el-input v-model="addForm.resourceType"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="租赁时长"
                            prop="time">
                <el-input v-model="addForm.time"
                          placeholder="单位：月"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始租赁时间"
                            prop="startTime">
                <el-date-picker v-model="addForm.startTime"
                                type="date"
                                placeholder="请选择开始租赁时间"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="租赁截止时间"
                            prop="endTime">
                <el-date-picker v-model="addForm.endTime"
                                type="date"
                                placeholder="请选择租赁截止时间"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="免租期"
                            prop="freeTime">
                <el-input v-model="addForm.freeTime"
                          placeholder="单位：月"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="押金"
                            prop="deposit">
                <el-input v-model="addForm.deposit"
                          placeholder="单位：元"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="抽成"
                            prop="percentage">
                <el-input v-model="addForm.percentage"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="佣金"
                            prop="commission">
                <el-input v-model="addForm.commission"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="总价"
                            prop="totalMoney">
                <el-input v-model="addForm.totalMoney"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效性"
                            prop="state">
                <el-switch v-model="addForm.state"
                           :active-value="1"
                           :inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="合同附件"
                        prop="accessoryId">
            <el-input v-model="addForm.accessoryId"></el-input>
          </el-form-item>

        </el-form>
        <!-- 底部区域 -->
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="addRecord">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改记录对话框 -->
      <el-dialog title="修改租赁合同"
                 :visible.sync="editDialogVisible"
                 width="50%"
                 @close="editDialogClosed">
        <el-form :model="editForm"
                 :rules="editFormRules"
                 ref="editFormRef"
                 label-width="110px">

          <el-row>
            <el-col :span="12">
              <el-form-item label="合同编号"
                            prop="contractNo">
                <el-input v-model="editForm.contractNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同名称"
                            prop="name">
                <el-input v-model="editForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出租方名称"
                            prop="aname">
                <el-input v-model="editForm.aname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出租方联系人姓名"
                            prop="acontact">
                <el-input v-model="editForm.acontact"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出租方联系人身份证号"
                            prop="aidCard">
                <el-input v-model="editForm.aidCard"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出租方联系电话"
                            prop="aphone">
                <el-input v-model="editForm.aphone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="承租方名称"
                            prop="bname">
                <el-input v-model="editForm.bname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="承租方联系人身份证号"
                            prop="bidCard">
                <el-input v-model="editForm.bidCard"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="承租方联系电话"
                            prop="bphone">
                <el-input v-model="editForm.bphone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="租赁的资源id"
                            prop="objId">
                <el-input v-model="editForm.objId"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="资源类型"
                            prop="resourceType">
                <el-input v-model="editForm.resourceType"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="租赁时长"
                            prop="time">
                <el-input v-model="editForm.time"
                          placeholder="单位：月"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始租赁时间"
                            prop="startTime">
                <el-date-picker v-model="editForm.startTime"
                                type="date"
                                placeholder="请选择开始租赁时间"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="租赁截止时间"
                            prop="endTime">
                <el-date-picker v-model="editForm.endTime"
                                type="date"
                                placeholder="请选择租赁截止时间"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="免租期"
                            prop="freeTime">
                <el-input v-model="editForm.freeTime"
                          placeholder="单位：月"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="押金"
                            prop="deposit">
                <el-input v-model="editForm.deposit"
                          placeholder="单位：元"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="抽成"
                            prop="percentage">
                <el-input v-model="editForm.percentage"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="佣金"
                            prop="commission">
                <el-input v-model="editForm.commission"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="总价"
                            prop="totalMoney">
                <el-input v-model="editForm.totalMoney"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效性"
                            prop="state">
                <el-switch v-model="editForm.state"
                           :active-value="1"
                           :inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="合同附件"
                        prop="accessoryId">
            <el-input v-model="editForm.accessoryId"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="editRecordInfo">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import {
  getList,
  add,
  deleteSelected,
  deleteCurrent,
  getEditInfo,
  edit,
  getDetail,
  modifySwitch,
} from "@/api/logistics/logisticsGreen.js";
export default {
  data () {
    return {
      // 表格列筛选数据
      tableFilterData: {
        dataList: [

        ],
        dataNow: [
          { label: "	序号	", attr: "id", checked: false },
          { label: "	合同编号	", attr: "contractNo", checked: true },
          { label: "	合同名称	", attr: "name", checked: true },
          { label: "	出租方名称	", attr: "aname", checked: true },
          { label: "	出租方联系人	", attr: "acontact", checked: false },
          { label: "	出租方联系人身份证号	", attr: "aidCard", checked: false },
          { label: "	出租方电话	", attr: "aphone", checked: false },
          { label: "	承租方名称	", attr: "bname", checked: true },
          { label: "	承租方身份证号	", attr: "bidCard", checked: false },
          { label: "	承租方联系电话	", attr: "bphone", checked: false },
          { label: "	租赁资源编号	", attr: "objId", checked: false },
          { label: "	资源类型	", attr: "resourceType", checked: true },
          { label: "	开始租赁时间	", attr: "startTime", checked: false },
          { label: "	租赁截止时间	", attr: "endTime", checked: false },
          { label: "	租赁时长（月）	", attr: "time", checked: false },
          { label: "	免租期（月）	", attr: "freeTime", checked: false },
          { label: "	押金（元）	", attr: "deposit", checked: false },
          { label: "	抽成	", attr: "percentage", checked: false },
          { label: "	佣金	", attr: "commission", checked: false },
          { label: "	总价	", attr: "totalMoney", checked: true },
          { label: "	有效性	", attr: "state", checked: true },
          { label: "	合同附件	", attr: "accessoryId", checked: true },

        ],
        checkLabels: [], // 筛选列显示多选框数据
        checkBoxList: [], // 筛选列数据
        indexTwo: 0,
      },
      // 记录列表分页区的参数
      queryInfo: {
        //搜索条件
        query: "",
        // 当前页码
        pageNum: 1,
        //每页显示条数
        pageSize: 3,
      },
      total: 0,


      // 控制添加记录对话框的显示与隐藏
      addDialogVisible: false,
      // 添加记录的表单数据
      addForm: {
        id: "",
        contractNo: "",
        name: "",
        aname: "",
        acontact: "",
        aidCard: "",
        aphone: "",
        bname: "",
        bidCard: "",
        bphone: "",
        objId: "",
        resourceType: "",
        startTime: "",
        endTime: "",
        time: "",
        freeTime: "",
        deposit: "",
        percentage: "",
        commission: "",
        totalMoney: "",
        state: "",
        accessoryId: "",

      },
      // 添加表单校验规则
      addFormRules: {},


      // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      // 查询到的用户信息
      editForm: {},
      // 编辑表单校验规则
      editFormRules: {},


      // 控制详细信息抽屉的显示与隐藏
      drawerVisible: false,
      // 详细信息的表单数据
      detailForm: {},
      // 被选中的记录id
      selectedList: [],
      selectedStr: {
        ids: "",
      },
      deleteNow: {
        ids: "",
      },
      typeValue: '',
      statusValue: '',
    }
  },
  created () {
    this.getTableList();
  },
  methods: {
    // 获取列表信息
    async getTableList () {
      this.queryInfo = this.getQueryCondition()
      const { data: res } = await this.$http.get("RentcontractAction/getBasicInfos", { params: this.queryInfo })
      if (!res.success) return this.$message.error('获取表格数据失败')
      // this.$message.success('获取列表数据成功')
      this.tableFilterData.dataList = res.rows
      this.total = res.total
      console.log(res)


    },
    //获取工具栏的各类查询条件：搜索框关键词、筛选框值等
    getQueryCondition () {
      //搜索框筛选
      var search = `rentcontract.name like "%${this.queryInfo.query}%"`;

      // 下拉框筛选
      var state = '';
      if (this.statusValue !== '') {
        state += ` and rentcontract.state='${this.statusValue}'`;
      }
      var type = '';
      if (this.typeValue !== '') {
        type += ` and rentcontract.resourceType='${this.typeValue}'`;
      }
      this.queryInfo.condition = `${search}${state}${type}`
      return this.queryInfo;
    },
    //工具栏的各种下拉框筛选监听
    async selectChange () {
      this.getTableList()
    },

    // 监听多选框选中的所有记录
    handleSelectionChange (val) {
      this.selectedList = val.map(item => {
        return item.id;
      })
    },
    // 监听pageSize改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getTableList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage
      this.getTableList()
    },
    // 监听添加对话框的关闭事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },
    // 监听修改对话框的关闭
    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    },
    // 表头列筛选功能
    filterFunHandle (type, currentItem, index) {
      if (type === 'filter') { // 筛选列
        if (event.target.checked === false) {
          this.tableFilterData.dataNow.forEach((item, index, arr) => {
            if (item.attr === currentItem) {
              return item.checked = false
            }
          })
        } else {
          this.tableFilterData.dataNow.forEach((item, index, arr) => {
            if (item.attr === currentItem) {
              return item.checked = true
            }
          })
        }
      } else if (type === 'allchecked') { // 全选
        if (this.tableFilterData.checkLabels.length === 0) {
          this.tableFilterData.dataNow.forEach((result) => {
            this.tableFilterData.checkLabels.push(result.attr)
          })
          this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值，全部选择    
        } else {
          this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值，全部选择
        }
        this.tableFilterData.dataNow.forEach((item, index, arr) => {
          item.checked = true
        })
      } else if (type === 'cancel') { // 取消全选
        this.tableFilterData.checkBoxList = [] // 复选框置为空，全部不选择
        this.tableFilterData.dataNow.forEach((item, index, arr) => {
          item.checked = false
        })
      }
    },
    // 状态筛选（开关筛选）
    filterState (value, row) {
      return row.state === value;
    },
    // 类型筛选（标签筛选）
    filterType (value, row) {
      return row.type === value;
    },
    //有效性筛选
    filterState (value, row) {
      return row.state === value;
    },






    // 添加记录
    addRecord () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post("RentcontractAction/addObject", this.addForm)
        if (!res.success) return this.$message.error('添加失败')
        this.$message.success('添加记录成功！')
        // 隐藏添加记录的对话框
        this.addDialogVisible = false
        // 重新获取记录列表数据
        this.getTableList()
      })
    },
    // 删除（批量）
    async deleteRecordByIds () {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除，返回值为字符串confirm
      // 如果用户取消删除，返回值未字符串cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      // 将selectList数组处理成字符串形式并赋值给selectStr的ids属性
      var str = ""
      for (var i = 0; i < this.selectedList.length - 1; i++) {
        str += this.selectedList[i] + ",";
      }
      str += this.selectedList[this.selectedList.length - 1]
      this.selectedStr.ids = str

      const { data: res } = await this.$http.post("RentcontractAction/deleteByIds", this.selectedStr)
      if (!res.success) return this.$message.error('删除记录失败！')
      this.$message.success('删除记录成功！')
      this.getTableList()

    },
    // 查看修改记录（当前记录）
    async showEditDialog (id) {
      const { data: res } = await this.$http.post("RentcontractAction/getObjectById", { id })
      if (!res.success)
        return this.$message.error('获取信息失败')
      this.editForm = res.rows[0]
      this.editDialogVisible = !this.editDialogVisible

    },
    // 确认修改
    editRecordInfo () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        // 发起修改记录信息的数据请求
        const { data: res } = await this.$http.post("RentcontractAction/updateNoNull", this.editForm)
        if (!res.success) return this.$message.error('更新信息失败！')
        // 关闭对话框
        this.editDialogVisible = false
        // 刷新数据列表
        this.getTableList()
        // 提示修改成功
        this.$message.success('更新信息成功！')
      })
    },
    // 删除（当前记录）
    async deleteRecordById (id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除，返回值为字符串confirm
      // 如果用户取消删除，返回值未字符串cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      this.deleteNow.ids = id

      const { data: res } = await this.$http.post("RentcontractAction/deleteByIds", this.deleteNow)
      if (!res.success) return this.$message.error('删除记录失败！')
      this.$message.success('删除记录成功！')
      this.getTableList()

    },

    // 修改switch开关状态（当前记录）
    async switchStateChanged (recordinfo) {
      console.log(recordinfo)
      const { data: res } = await this.$http.post("RentcontractAction/updateNoNull", recordinfo)
      if (!res.success) {
        recordinfo.state = !recordinfo.state
        return this.$message.error('更新信息失败！')
      }
      // 关闭对话框
      this.editDialogVisible = false
      // 刷新数据列表
      this.getTableList()
      // 提示修改成功
      this.$message.success('更新信息成功！')
    },
    // 导出表格
    async exportDataToExcel () {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将把数据为导出表格, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除，返回值为字符串confirm
      // 如果用户取消删除，返回值未字符串cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }

      const { date: res } = await this.$http.post("RentcontractAction/exportDataToExcel")
      if (!res.success) return this.$message.error('导出表格失败')
      this.$message.success('导出表格成功')
    },


  }

}


</script>
<style scoped>
.el-table {
  font-size: 13px;
}
.el-pagination {
  text-align: left;
  padding-top: 20px;
}
</style>